<template>
  <!-- 顶部导航栏 -->
  <CustomNavbar />
  <!-- refresher-enabled开启下拉刷新 -->
  <scroll-view scroll-y class="scroll-view" refresher-enabled @scrolltolower="onScrolltolower" @refresherrefresh="handleRefresh" :refresher-triggered="triggered">
    <template v-if="ifDataReady">
      <!-- 轮播图 -->
      <FnSwiper :list="bannerList"/>
      <!-- 分类面板 -->
      <CategoryPanel :list="CategoryList" />
      <HotPanel :list="HotList"/>
      <FnGuess ref="guessRef"/>
    </template>
    <HomePageSkeleton v-else/>
  </scroll-view>
  
</template>

<script setup lang="ts">
import CustomNavbar from '@/pages/index/components/CustomNavbar.vue';
import { ref } from 'vue'
import {getHomeBannerApi, getHomeCategoryAPI, getHomeHotAPI} from '@/api/home'
import { onLoad } from '@dcloudio/uni-app';
import type { BannerItem, CategoryItem, HotItem } from '@/types/home';
import CategoryPanel from '@/pages/index/components/CategoryPanel.vue'
import HotPanel from '@/pages/index/components/HotPanel.vue';
// import type { FnGuessInstance } from '@/types/components';
import HomePageSkeleton from '@/pages/index/components/HomePageSkeleton.vue';
import {useGuessList} from '@/composables/index'
const ifDataReady = ref(false)
const bannerList = ref<BannerItem[]>([])
const CategoryList = ref<CategoryItem[]>([])
const HotList = ref<HotItem[]>([])
const getHomeBannerData = async () => {
  const res = await getHomeBannerApi()
  bannerList.value = res.result
}
const getHomeCategoryData = async ()=>{
  const res = await getHomeCategoryAPI()
  CategoryList.value = res.result
}
const getHomeHotData = async ()=>{
  const res = await getHomeHotAPI()
  HotList.value = res.result
}
// const guessRef = ref<FnGuessInstance>()
// // scroll-view触底事件
// const onScrolltolower = () =>{
//   console.log('daodila', guessRef)
//   guessRef.value?.getMore()
// }
// 通过封装的组合式函数引入
const {guessRef, onScrolltolower} = useGuessList()
// 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
const triggered = ref(false)
// scroll-view下拉事件
const handleRefresh = async ()=>{
  console.log('下拉')
  //下拉动画开启
  triggered.value = true
  guessRef.value?.resetData()
  await Promise.all([getHomeBannerData(),getHomeCategoryData(),getHomeHotData(), guessRef.value?.getMore()])
  //下拉动画关闭
  triggered.value = false
}
onLoad(async ()=>{
  ifDataReady.value = false
  await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData(), guessRef.value?.getMore()])
  ifDataReady.value = true
})
</script>

<style lang="scss">
/* #ifdef APP-PLUS */
#app,
/* #endif */
page {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #f7f7f7;
}
.scroll-view {
  flex: 1;
  // scroll-view标签中要给定高度或宽度才能生效（根据给定的flex-direction为row还是column决定给定宽度还是高度100%）
  // height: 100%;
  overflow-y: scroll;
}
</style>
